<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="beans.Employee" %>
<!DOCTYPE html>
<html lang="zh-CN">
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="beans.Employee" %>
<%@ page import="service.EmployeeService" %>
<%
    // 从会话中获取用户信息（使用您现有的登录系统）
    Employee employee = (Employee) session.getAttribute("user");
    String role = (String) session.getAttribute("role");

    // 如果不是员工角色或者没有登录，重定向到登录页面
    if (employee == null || (!"employee".equals(role) && !"finance".equals(role) && !"driverLeader".equals(role))) {
        response.sendRedirect("login.jsp");
        return;
    }

    // 如果需要刷新员工信息，从数据库重新获取
    String refresh = request.getParameter("refresh");
    if ("true".equals(refresh)) {
        EmployeeService employeeService = new EmployeeService();
        Employee refreshedEmployee = employeeService.getEmployeeByID(employee.getEmployeeID());
        if (refreshedEmployee != null) {
            employee = refreshedEmployee;
            session.setAttribute("user", employee); // 更新session中的用户信息
        }
    }

    // 获取消息参数，用于显示操作结果
    String message = request.getParameter("message");
%>
<head>
    <meta charset="UTF-8">
    <title>公司用车管理系统（财务）</title>
    <style>
        /* 保持原有样式不变 */
        body {
            margin: 0;
            padding: 0;
            font-family: "Microsoft YaHei", Arial, sans-serif;
            background: #f6f6f6;
        }
        .header {
            background: #183a8a;
            color: #fff;
            font-size: 2rem;
            font-weight: bold;
            padding: 10px 0 10px 10px;
            letter-spacing: 2px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .header-right {
            display: flex;
            align-items: center;
            margin-right: 30px;
            font-size: 1rem;
        }
        .user-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #fff;
            color: #183a8a;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            margin-right: 10px;
        }
        .user-info {
            margin-right: 20px;
            color: #fff;
        }
        .logout {
            color: #fff;
            text-decoration: none;
            margin-left: 10px;
            font-size: 1rem;
        }
        .container {
            display: flex;
            height: calc(100vh - 56px);
        }
        .sidebar {
            width: 220px;
            background: #183a8a;
            display: flex;
            flex-direction: column;
            padding-top: 10px;
            box-shadow: 2px 0 8px rgba(24,58,138,0.05);
        }
        .menu-item {
            color: #fff;
            padding: 18px 0 18px 32px;
            font-size: 1.15rem;
            cursor: pointer;
            border-left: 5px solid transparent;
            transition: background 0.2s, border 0.2s;
            text-decoration: none;
            display: block;
        }
        .menu-item.active, .menu-item:hover {
            background: #2450a7;
            border-left: 5px solid #fff;
            font-weight: bold;
            box-shadow: 0 4px 8px rgba(24,58,138,0.10);
        }
        .main-content {
            flex: 1;
            background: #fff;
            border: 2px solid #3ba0e9;
            border-left: none;
            padding: 20px;
        }
        .profile-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        .profile-table th, .profile-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        .profile-table th {
            width: 30%;
            background-color: #f5f5f5;
            font-weight: bold;
        }
        .profile-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
        }
        .edit-btn {
            padding: 8px 16px;
            background-color: #3ba0e9;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        .edit-btn:hover {
            background-color: #2d8ac9;
        }
        .form-container {
            max-width: 600px;
            margin: 0 auto;
            display: none;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .form-group input[type="text"],
        .form-group input[type="password"],
        .form-group select {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .form-group .upload {
            border: 1px dashed #ccc;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            border-radius: 4px;
        }
        .form-group .upload img {
            max-width: 100px;
            max-height: 100px;
            border-radius: 50%;
        }
        .form-actions {
            text-align: center;
            margin-top: 20px;
        }
        .form-actions button {
            padding: 10px 20px;
            margin: 0 10px;
            border: none;
            border-radius: 4px;
            background-color: #3ba0e9;
            color: #fff;
            cursor: pointer;
        }
        .form-actions button.reset {
            background-color: #ccc;
        }
        .error-message {
            color: red;
            text-align: center;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
<div class="header">
    <div>欢迎登录公司用车管理系统（财务）</div>
    <div class="header-right">
        <div class="user-icon">👤</div>
        <div class="user-info">
            用户: <%= employee.getEmployeeID() %>
            (<%= employee.getPosition() %>)
        </div>
        <a href="LogoutServlet" class="logout">退出登录</a>
    </div>
</div>
<div class="container">
    <div class="sidebar">
        <a class="menu-item" href="firstpage.jsp">系统首页</a>
        <a class="menu-item active" href="Profile.jsp">个人中心</a>
        <a class="menu-item" href="myTo-Do.jsp">我的待办</a>
        <a class="menu-item" href="Cost.jsp">用车费用报销单</a>
        <a class="menu-item" href="expenseClaim.jsp">维修费用报销单</a>
    </div>
    <div class="main-content">
        <% if (request.getAttribute("error") != null) { %>
        <div class="error-message"><%= request.getAttribute("error") %></div>
        <% } %>

        <!-- 个人信息展示表格 -->
        <div id="profile-info">
            <table class="profile-table">
                <tr>
                    <th>员工ID</th>
                    <td><%= employee.getEmployeeID() %></td>
                </tr>
                <tr>
                    <th>姓名</th>
                    <td><%= employee.getEmployeeName() != null ? employee.getEmployeeName() : "" %></td>
                </tr>
                <tr>
                    <th>部门ID</th>
                    <td><%= employee.getEmployeeID() %></td>
                </tr>
                <tr>
                    <th>职务</th>
                    <td><%= employee.getPosition() != null ? employee.getPosition() : "" %></td>
                </tr>
                <tr>
                    <th>邮箱</th>
                    <td><%= employee.getEmail() != null ? employee.getEmail() : "" %></td>
                </tr>
                <tr>
                    <th>电话</th>
                    <td><%= employee.getPhoneNumber() != null ? employee.getPhoneNumber() : "" %></td>
                </tr>
                <tr>
                    <th>入职日期</th>
                    <td><%= employee.getHireDate() != null ? employee.getHireDate() != null : "" %></td>
                </tr>
                <tr>
                    <th>性别</th>
                    <td><%= employee.getGender() != null ? employee.getGender() : "" %></td>
                </tr>
            </table>
            <button class="edit-btn" onclick="showEditForm()">修改个人信息</button>
        </div>

        <!-- 编辑表单 -->
        <div id="edit-form" class="form-container">
            <form action="updateProfileServlet" method="post">
                <div class="form-group">
                    <label for="employeeName">姓名：</label>
                    <input type="text" id="employeeName" name="employeeName"
                           value="<%= employee.getEmployeeName() != null ? employee.getEmployeeName() : "" %>">
                </div>
                <div class="form-group">
                    <label for="password">密码：</label>
                    <input type="password" id="password" name="password" placeholder="输入新密码">
                </div>
                <div class="form-group">
                    <label for="position">职务：</label>
                    <select id="position" name="position">
                        <option value="财务" <%= "财务".equals(employee.getPosition()) ? "selected" : "" %>>财务</option>
                        <option value="司机" <%= "司机".equals(employee.getPosition()) ? "selected" : "" %>>司机</option>
                        <option value="员工" <%= "员工".equals(employee.getPosition()) ? "selected" : "" %>>员工</option>
                        <option value="司机队长" <%= "司机队长".equals(employee.getPosition()) ? "selected" : "" %>>司机队长</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="email">邮箱：</label>
                    <input type="text" id="email" name="email"
                           value="<%= employee.getEmail() != null ? employee.getEmail() : "" %>">
                </div>
                <div class="form-group">
                    <label for="phoneNumber">电话号码：</label>
                    <input type="text" id="phoneNumber" name="phoneNumber"
                           value="<%= employee.getPhoneNumber() != null ? employee.getPhoneNumber() : "" %>">
                </div>
                <div class="form-group">
                    <label for="gender">性别：</label>
                    <select id="gender" name="gender">
                        <option value="女" <%= "女".equals(employee.getGender()) ? "selected" : "" %>>女</option>
                        <option value="男" <%= "男".equals(employee.getGender()) ? "selected" : "" %>>男</option>
                    </select>
                </div>
                <div class="form-actions">
                    <button type="submit">保存</button>
                    <button type="button" class="reset" onclick="hideEditForm()">取消</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    // 显示编辑表单
    function showEditForm() {
        document.getElementById('profile-info').style.display = 'none';
        document.getElementById('edit-form').style.display = 'block';
    }

    // 隐藏编辑表单
    function hideEditForm() {
        document.getElementById('profile-info').style.display = 'block';
        document.getElementById('edit-form').style.display = 'none';
    }
</script>
</body>
</html>